import { defineStore } from 'pinia';
import { ref } from 'vue';

import { NavbarOptions } from './types';

/** 初始状态 */
const initState: NavbarOptions = {};

/** 导航栏存储 */
export const useNavbarStore = defineStore(
  'ea-navbar',
  () => {
    /** 导航栏信息 */
    const state = ref<{ [key: string]: NavbarOptions }>({});

    /** 获取选项 */
    const getOptions = (key: string): NavbarOptions => {
      const options = state.value[key] || initState;
      return options;
    };

    /** 获取自定义根节点样式 */
    const getCustomStyle = (key: string) => getOptions(key).customStyle;
    /** 获取自定义根节点样式类 */
    const getCustomClass = (key: string) => getOptions(key).customClass;
    /** 获取卡片标题 */
    const getTitle = (key: string) => getOptions(key).title;
    /** 获取左侧文案 */
    const getLeftText = (key: string) => getOptions(key).leftText;
    /** 获取右侧文案 */
    const getRightText = (key: string) => getOptions(key).rightText;
    /** 获取是否显示左侧箭头 */
    const getLeftArrow = (key: string) => getOptions(key).leftArrow;
    /** 获取是否显示下边框 */
    const getBordered = (key: string) => getOptions(key).bordered;
    /** 获取是否固定到顶部 */
    const getFixed = (key: string) => getOptions(key).fixed;
    /** 获取固定在顶部时，是否在标签位置生成一个等高的占位元素。 */
    const getPlaceholder = (key: string) => getOptions(key).placeholder;
    /** 获取导航栏 z-index */
    const getZIndex = (key: string) => getOptions(key).zIndex;
    /** 获取是否开启顶部安全区适配 */
    const getSafeAreaInsetTop = (key: string) => getOptions(key).safeAreaInsetTop;
    /** 获取是否禁用左侧按钮，禁用时透明度降低，且无法点击。 */
    const getLeftDisabled = (key: string) => getOptions(key).leftDisabled;
    /** 获取是否禁用右侧按钮，禁用时透明度降低，且无法点击。 */
    const getRightDisabled = (key: string) => getOptions(key).rightDisabled;

    /** 设置 */
    const set = (key: string, values: NavbarOptions) => {
      state.value[key] = {
        ...(state.value[key] || initState),
        ...values,
      };
    };
    /** 重置 */
    const reset = (key: string) => {
      state.value[key] = { ...initState };
    };

    /** 清除自定义根节点样式 */
    const clearCustomStyle = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, customStyle: undefined });
    };
    /** 清除自定义根节点样式类 */
    const clearCustomClass = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, customClass: undefined });
    };
    /** 清除卡片标题 */
    const clearTitle = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, title: undefined });
    };
    /** 清除左侧文案 */
    const clearLeftText = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, leftText: undefined });
    };
    /** 清除右侧文案 */
    const clearRightText = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, rightText: undefined });
    };
    /** 清除是否显示左侧箭头 */
    const clearLeftArrow = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, leftArrow: undefined });
    };
    /** 清除是否显示下边框 */
    const clearBordered = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, bordered: undefined });
    };
    /** 清除是否固定到顶部 */
    const clearFixed = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, fixed: undefined });
    };
    /** 清除固定在顶部时，是否在标签位置生成一个等高的占位元素。 */
    const clearPlaceholder = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, placeholder: undefined });
    };
    /** 清除导航栏 z-index */
    const clearZIndex = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, zIndex: undefined });
    };
    /** 清除是否开启顶部安全区适配 */
    const clearSafeAreaInsetTop = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, safeAreaInsetTop: undefined });
    };
    /** 清除是否禁用左侧按钮，禁用时透明度降低，且无法点击。 */
    const clearLeftDisabled = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, leftDisabled: undefined });
    };
    /** 清除是否禁用右侧按钮，禁用时透明度降低，且无法点击。 */
    const clearRightDisabled = (key: string) => {
      const { ...status } = getOptions(key);
      set(key, { ...status, rightDisabled: undefined });
    };

    return {
      /** 导航栏信息 */
      state,
      /** 获取选项 */
      getOptions,
      /** 获取自定义根节点样式 */
      getCustomStyle,
      /** 获取自定义根节点样式类 */
      getCustomClass,
      /** 获取卡片标题 */
      getTitle,
      /** 获取左侧文案 */
      getLeftText,
      /** 获取右侧文案 */
      getRightText,
      /** 获取是否显示左侧箭头 */
      getLeftArrow,
      /** 获取是否显示下边框 */
      getBordered,
      /** 获取是否固定到顶部 */
      getFixed,
      /** 获取固定在顶部时，是否在标签位置生成一个等高的占位元素。 */
      getPlaceholder,
      /** 获取导航栏 z-index */
      getZIndex,
      /** 获取是否开启顶部安全区适配 */
      getSafeAreaInsetTop,
      /** 获取是否禁用左侧按钮，禁用时透明度降低，且无法点击。 */
      getLeftDisabled,
      /** 获取是否禁用右侧按钮，禁用时透明度降低，且无法点击。 */
      getRightDisabled,
      /** 设置 */
      set,
      /** 重置 */
      reset,
      /** 清除自定义根节点样式 */
      clearCustomStyle,
      /** 清除自定义根节点样式类 */
      clearCustomClass,
      /** 清除卡片标题 */
      clearTitle,
      /** 清除左侧文案 */
      clearLeftText,
      /** 清除右侧文案 */
      clearRightText,
      /** 清除是否显示左侧箭头 */
      clearLeftArrow,
      /** 清除是否显示下边框 */
      clearBordered,
      /** 清除是否固定到顶部 */
      clearFixed,
      /** 清除固定在顶部时，是否在标签位置生成一个等高的占位元素。 */
      clearPlaceholder,
      /** 清除导航栏 z-index */
      clearZIndex,
      /** 清除是否开启顶部安全区适配 */
      clearSafeAreaInsetTop,
      /** 清除是否禁用左侧按钮，禁用时透明度降低，且无法点击。 */
      clearLeftDisabled,
      /** 清除是否禁用右侧按钮，禁用时透明度降低，且无法点击。 */
      clearRightDisabled,
    };
  },
  {
    persist: false, // 如果需要持久化就写 true, 不需要持久化就写 false（或者去掉这个配置项）。
  },
);
